<template>
	<view class="container">
		<u-swiper imgMode="heightFix" :list="list5" @change="e => current = e.current" :autoplay="false" height="700rpx" keyName="image_url">
			<view slot="indicator" class="indicator">
				<view class="indicator__dot" v-for="(item, index) in list5" :key="index"
					:class="[index === current && 'indicator__dot--active']">
				</view>
			</view>
		</u-swiper>
		<u-gap bgColor="transparent" height="10"></u-gap>
		<view class="show_title" v-if="goods!=''">
			<view class="goods_price">
				<view class="left">
					￥<text class="show_title_text1">{{goods.goods_price}}</text>
					<text class="level" v-if="goods.level_name">{{goods.level_name}}</text>
				</view>
				<view class="right">
					<text class="show_title_text5">总销量：{{goods.sales_sum}}</text>
				</view>
			</view>
			<view class="market_price" v-if="false">
				<text class="show_title_text2">￥{{goods.market_price}}</text>
			</view>
			<text class="goods_name">{{goods.goods_name}}</text>
			<text class="goods_remark" v-if="goods.goods_remark">{{goods.goods_remark}}</text>
			<view class="show_title_flex" v-if="false">
				<view class="show_title_flex1">
					<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/mianyunfei.png"></image>
					<text class="show_title_text4">运费￥0.00</text>
				</view>
				<view class="show_title_flex2">
					<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/zoushi.png"></image>
					<text class="show_title_text5">总销量：{{goods.sales_sum}}</text>
				</view>
			</view>
		</view>
		<view class="show_juan" v-if="false">
			<view class="show_juan_top">
				<text class="show_juan_top_text1">优惠券</text>
				<text class="show_juan_top_text2">满1499减100</text>
				<view style="flex: 1;">
					<text class="show_juan_top_text2">满799减50</text>
				</view>
				<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/drop-down2.png" mode="" class="jiantou"></image>
			</view>
			<view class="show_juan_center">
				<text class="show_juan_center_text1">活动</text>
				<view style="flex: 1;" class="show_juan_center_flex">
					<view class="show_juan_center_flex2">
						<text class="show_juan_center_bg" style="margin-right: 20rpx;">包邮</text>
						<text>余额满</text>
						<text class="show_juan_center_text2">￥99.00</text>
						<text>包邮</text>
					</view>
					<view class="show_juan_center_flex2">
						<text class="show_juan_center_bg" style="margin-right: 20rpx;">积分</text>
						<text>支持积分抵扣</text>
						<text class="show_juan_center_text2">5</text>
						<text>元</text>
					</view>
					<view class="show_juan_center_flex2">
						<text class="show_juan_center_bg" style="margin-right: 20rpx;">余额</text>
						<text>支持余额抵扣</text>
					</view>
				</view>
				<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/drop-down2.png" mode="" class="jiantou"></image>
			</view>
			<view class="show_juan_bottom">
				<text class="show_juan_center_text1">服务</text>
				<view style="flex: 1;">
					<text class="show_juan_center_text3">正品保证</text>
				</view>

				<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/drop-down2.png" mode="" class="jiantou"></image>
			</view>
			<view class="show_juan_bottom">
				<text class="show_juan_center_text1">已选</text>
				<text style="flex: 1; margin-left: 50rpx;font-size: 26rpx; color: #525252;">请选择商品规格</text>
				<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/drop-down2.png" mode="" class="jiantou"></image>
			</view>
		</view>

		<!-- <view class="show_pingjia">
			<view class="show_pingjia_1">
				<text>评价（0）</text>
			</view>
			<view class="show_pingjia_1">
				<text>暂无评价</text>
			</view>
		</view> -->

		<view class="show_guanggao" v-if="goods!=''">
			<view class="show_guanggao_list">
				<text :class='(index==0)?"show_guanggao_text1 border-red":"show_guanggao_text1"'
					@click="index=0">详情介绍</text>
			</view>
			<view class="show_guanggao_1" v-if="index==0">
				<view v-html="goods.goods_content"></view>
				<!-- <image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/taotu.png" mode="" class="show_guanggao_img1"></image> -->
			</view>
		</view>
		<view class="show_fixed">
			<view class="show_fixed_left">
				<view class="show_fixed_left_c" @tap='jump(1)'>
					<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/dianpu.png" mode=""></image>
					<text class="show_fixed_left_text sy">首页</text>
				</view>
				<view class="show_fixed_left_c" @click="collection">
					<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/shoucang1.png" v-if="!edit"></image>
					<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/shoucang2.png" v-else></image>
					<text class="show_fixed_left_text" v-if="!edit">收藏</text>
					<text class="show_fixed_left_text" v-else>取消收藏</text>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="share" class="show_fixed_left_c" v-if="user_id!=0">
					<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/fenxiang.png" mode=""></image>
					<text class="show_fixed_left_text">分享</text>
				</button>
				<!-- #endif -->
			</view>
			<view class="show_fixed_right">
				<block v-if="false">
					<button class="btn1" @click="join_cart">加入购物车</button>
					<button class="btn2" @click="buy_now">立即购买</button>
				</block>
				<button class="btn3" @click="buy_now">立即购买</button>
			</view>
		</view>
		<u-popup :safeAreaInsetBottom="false" :safeAreaInsetTop="false" :show="show" @close="close" @open="open">
			<view class="info-container">
				<view class="u_popup_flex">
					<image :src="item_img" mode=""/>
					<view class="u_popup_flex_c">
						<text class="u_popup_flex_text1">￥{{goods_price*value}}</text>
						<text class="u_popup_flex_text2">库存{{item_store_count}}</text>
						<text class="u_popup_flex_text3">已选:{{item_str}}</text>
					</view>
				</view>
				<view class="u_popup_2">
					<view class="u_popup_c">
						<view class="u_popup_c_item" v-for="(item,index) in filter_spec" :key="item.spec_id">
							<view class="u_popup_c_item_tit">{{item.name}}</view>
							<view class="u_popup_c_item_con">
								<text @tap="changeItem(index,child.id,childIndex)" :class="{'act':child.id==item.selected}" v-for="(child,childIndex) in item.child" :key="child.id">{{child.item}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="u_popup_3">
					<text>数量</text>
					<view class="">
						<u-number-box 
						v-model="value" 
						button-size="26"
						bgColor="#00000000"
						:max="item_store_count"
						@change="valChange"></u-number-box>
					</view>
				</view>
				<view class="btn-container">
					<button class="btn3" @click="addcart">确定</button>
				</view>
			</view>
		</u-popup>
		<u-popup
		:closeOnClickOverlay="false" 
		:show="loginShow" 
		@close="loginShow=false" 
		mode="center" 
		bgColor="transparent"
		:overlayOpacity="0.6">
			<view class="weixin-login">
				<view class="weixin-login-info">
					<text class="text">登录后可体验完整功能</text>
					<button :disabled="loginDisabled" type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
						class="weixin-login-btn">微信授权登录</button>
				</view>
				<view class="weixin-login-bot">
					<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/alert-close.png" @click="loginShow=false" mode="widthFix"/>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				list5: [],
				current: 0,
				show: false,
				value: 1,
				index: 0,
				item_id: 0,
				index3: '',
				k_name: '',
				k_price: '',
				goods: '',
				goods_price: 0.00,
				item_img: '',
				item_store_count: 0,
				filter_spec: [],
				spec_goods_price: [],
				k_id:0,
				//1加入购物车2立即购买
				buy_type:1,
				//是否收藏
				edit:0,
				option_id:0,
				item_str:'',
				item_name:'',
				loginShow:false,
				loginDisabled: false,
				reid:0
			}
		},
		onLoad(e) {
			_this=this
			if(e.reid){
				_this.reid=e.reid
			}
			//加入历史足迹
			this.option_id = e.id
			if(this.option_id==undefined){
				uni.$u.toast("提交参数有误")
				setTimeout(()=>{
					uni.navigateBack({})
				},2000)
			}
			// #ifdef MP-WEIXIN
			_this.login()
			// #endif
			this.getgoods(e.id, this.user_id)
		},
		onShareAppMessage() {
			if(_this.goods!=''){
				return {
					title:_this.goods.goods_name,
					path:'/pages/cart/show?reid='+_this.user_id+'&id='+_this.goods.goods_id,
					imageUrl:_this.goods.goods_img
				}
			}
		},
		methods: {
			async getPhoneNumber(e){
				if(e.target.errMsg=="getPhoneNumber:ok"){
					_this.loginDisabled=true
					let res={
						'encryptedData':e.target.encryptedData,
						'iv':e.target.iv,
						'sessionKey':uni.getStorageSync('sessionKey'),
						'tuid':uni.getStorageSync('tuid'),
						'reid':_this.reid,
					}
					const data = await _this.$post('api/weixin_mobile',res)
					if (data.code==200) {
						uni.$u.toast(data.msg)
						//存入用户信息
						_this.$u.vuex('user_id',data.data.user.user_id)
						//存入token
						_this.$u.vuex('user_token', data.data.user.user_token)
					}else{
						uni.$u.toast(data.msg)
					}
					setTimeout(()=>{
						_this.loginShow=false
						_this.loginDisabled=false
					},2000)
				}else{
					uni.$u.toast('获取失败')
					_this.loginShow=false
				}
			},
			async login(){
				// #ifdef MP-WEIXIN
				uni.login({
				  provider: 'weixin',
				  onlyAuthorize:true,
				  success: function (loginRes) {
					_this.wx_login(loginRes.code)
				  },fail(fail) {
				  	console.log(fail)
				  }
				});
				// #endif
			},
			async wx_login(code){
				let res = {'code':code}
				const data = await _this.$post('api/weixin_login',res)
				if(data.code==200){
					let openid=data.data.openid
					let sessionKey=data.data.sessionKey
					let tuid=data.data.tuid
					uni.setStorageSync('openid',openid)
					uni.setStorageSync('sessionKey',sessionKey)
					uni.setStorageSync('tuid',tuid)
				}
			},
			//跳转 1首页2购物车
			jump(type){
				if(type==1){
					this.$u.route({
						url: "pages/index/index",
						type: "switchTab"
					})
				}else{
					this.$u.route({
						url: "pages/cart/cart",
						type: "switchTab"
					})
				}
			},
			//选择规格
			changeItem(parent_index,item_id,child_index){
				if(item_id==this.filter_spec[parent_index]['selected']){
					return;
				}
				this.filter_spec[parent_index]['selected']=item_id
				if(this.filter_spec[parent_index]['child'][child_index]['image']!=null){
					this.item_img=this.filter_spec[parent_index]['child'][child_index]['image']
				}
				this.changePrice();
			},
			//计算价格
			changePrice(){
				if(this.filter_spec.length==0){
					return;
				}
				var spec_items=this.spec_goods_price
				var sel=[]
				var str=''
				for(let i=0;i<this.filter_spec.length;i++){
					for(let j=0;j<this.filter_spec[i]['child'].length;j++){
						var items=this.filter_spec[i]['child'];
						if(this.filter_spec[i]['selected']==items[j]['id']){
							sel.push(items[j]['id'])
							str+=items[j]['item']+" "
						}
					}
				}
				this.item_name = str+" "
				this.item_str=str+" "+this.value+"件"
				var key = sel.sort().join('_')
				var index=spec_items.findIndex(res=>res['key']==key);
				if(index!=-1){
					this.goods_price=spec_items[index]['price']
					this.item_id=spec_items[index]['item_id']
					this.item_store_count=spec_items[index]['store_count']
				}
			},
			//获取商品信息
			async getgoods(goods_id, user_id) {
				const params = {
					id: goods_id,
				}
				const data = await _this.$post('api/GoodsDetail',params)
				this.list5 = data.data.goods_imgs
				this.goods = data.data.goods
				this.goods_price = data.data.goods.goods_price
				this.item_id=data.data.item_id
				this.item_img=data.data.item_img
				this.item_store_count=data.data.item_store_count
				this.filter_spec = data.data.filter_spec
				this.spec_goods_price = data.data.spec_goods_price
				this.item_str = data.data.item_str
				this.edit = data.data.edit
			},
			join_cart(){
				this.buy_type=1
				this.show=true
			},
			buy_now(){
				if (this.user_id == 0){
					_this.loginShow=true
					return
				}
				this.buy_type=2
				this.show=true
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			valChange(e) {
				this.value = e.value
				this.item_str=this.item_name+" "+this.value+"件"
				// console.log('当前值为: ' + e.value)
			},
			//跳转到登录页面
			loginto() {
				this.$u.route({
					url: 'pages/auth/login'
				})
			},
			//收藏和取消收藏
			async collection(){
				if (this.user_id == 0){
					_this.loginShow=true
					return
				}
				const params = {
					goods_id:this.goods.goods_id,
					type: this.edit==0?1:2
				}
				const data = await _this.$post('api/EditCollect',params)
				if(data.code==200){
					this.edit=this.edit==0?1:0
				}else{
					this.$u.toast(data.msg)
				}
			},
			//加入购物车/立即购买
			async addcart(){
				if(this.buy_type==1){
					const params = {
						goods_id:this.goods.goods_id,
						item_id:this.item_id,
						goods_num:this.value
					}
					const data  = await AddCart(params)
					if(data.code==200){
						this.$u.toast(data.msg)
					}else{
						this.$u.toast(data.msg)
					}
					this.show = false
				}else{
					//跳转到确认订单页面
					this.$u.route({
						url: 'pages/center/order/Confirmorder',
						params: {
							action: 'now',
							goods_id:this.goods.goods_id,
							goods_num:this.value,
							item_id:this.item_id
						}
					})
				}
			}
		}
	}
</script>
<!-- #ifdef APP-PLUS -->
<style>
	page{
		background: #FFFFFF;
	}
</style>
<!-- #endif -->
<style lang="scss" scoped>
	page{
		background-color: #FFFFFF;
	}
	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #F2F3F5;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.show_title {
		display: flex;
		flex-direction: column;
		
		padding: 0 20rpx 20rpx 20rpx;
		border-bottom: 2rpx solid #F6F7FB;
	}
	.goods_price{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10rpx;
		color: $theme-color;
		.show_title_text1 {
			font-size: 38rpx;
		}
		.level{
			font-size: 26rpx;
			border: 2rpx solid #BCBCBC;
			padding: 0 10rpx;
			border-radius: 10rpx;
			margin-left: 10rpx;
			color: #BCBCBC;
		}
		.right{
			.show_title_text5{
				color: #BCBCBC;
			}
		}
	}
	.market_price{
		.show_title_text2 {
			font-size: 22rpx;
			color: #BCBCBC;
			text-decoration: line-through;
		}
	}

	.goods_name {
		margin-top: 10rpx;
		font-size: 28rpx;
	}
	.goods_remark{
		color: #BCBCBC;
		font-size: 24rpx;
		margin-top: 10rpx;
	}
	.show_title_flex {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		color: #525252;
		margin-bottom: 20rpx;
		font-size: 24rpx;
		.show_title_flex1 {
			display: flex;
			align-items: center;
			image {
				width: 32rpx;
				height: 28rpx;
				margin-right: 5rpx;
			}
		}
		.show_title_flex2 {
			display: flex;
			align-items: center;
			image {
				width: 32rpx;
				height: 28rpx;
				margin-right: 5rpx;
			}
		}
	}

	.jiantou {
		width: 10rpx;
		height: 18rpx;
	}

	.show_juan_top {
		display: flex;
		align-items: center;
		width: 90%;
		margin: 0 auto;
		margin-top: 26rpx;
		padding-bottom: 22rpx;
		border-bottom: 1px solid #F3F3F3;
	}

	.show_juan_center {
		display: flex;
		align-items: center;
		width: 90%;
		margin: 0 auto;
		margin-top: 26rpx;
		padding-bottom: 22rpx;
		border-bottom: 1px solid #F3F3F3;
	}

	.show_juan_bottom {
		display: flex;
		align-items: center;
		width: 90%;
		margin: 0 auto;
		margin-top: 26rpx;
		padding-bottom: 22rpx;
	}

	.show_juan_top_text1 {
		font-size: 26rpx;
		color: #BCBCBC;
	}

	.show_juan_top_text2 {
		font-size: 22rpx;
		color: #FFF;
		background-color: #FF4362;
		border-radius: 18rpx;
		padding: 6rpx 14rpx;
		margin-left: 30rpx;
	}

	.show_juan_center_text1 {
		font-size: 26rpx;
		color: #BCBCBC;
	}

	.show_juan_center_flex {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 58rpx;
	}

	.show_juan_center_flex2 {
		display: flex;
	}

	.show_juan_center_flex2 text {
		font-size: 22rpx;
		margin: 20rpx 0;
	}

	.show_juan_center_bg {
		border: 1px solid #FF4362;
		color: #FF4362;
		font-size: 22rpx;
		border-radius: 18rpx;
		padding: 2rpx 16rpx;
		margin: 20rpx 20rpx;
	}

	.show_juan_center_text2 {
		font-size: 22rpx;
		color: #FF4362;
		margin: 20rpx 0;
	}

	.show_juan_center_text3 {
		background-color: #FBEFF3;
		color: #FF4362;
		padding: 4rpx 10rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
		margin-left: 50rpx;
	}

	.show_pingjia {
		width: 90%;
		margin: 0 auto;
		margin-top: 26rpx;
		// padding-bottom: 22rpx;
	}

	.show_pingjia_1 {
		border-bottom: 1px solid #F3F3F3;
		font-size: 26rpx;
		color: #525252;
		padding: 20rpx 0 0 0;
	}

	.show_fixed {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		padding-bottom: env(safe-area-inset-bottom);
		box-shadow: 0px -3px 8rpx 0 rgba($color: #999999, $alpha: 0.2);
	}

	.show_fixed_left {
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0 20rpx;
		box-sizing: border-box;
		.show_fixed_left_c {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: none;
			padding: 0;
			margin: 0;
			line-height: unset;
			image {
				width: 50rpx;
				height: 50rpx;
				margin-bottom: 5rpx;
			}
			.show_fixed_left_text {
				color: #a2a2a2;
				font-size: 26rpx;
			}
			.sy{
				color: inherit;
			}
		}
	}
	.show_fixed_right {
		width: 50%;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		.btn1 {
			flex: 1;
			height: 60rpx;
			line-height: 60rpx;
			background: $theme-color;
			color: #fff;
			font-size: 22rpx;
			border-top-left-radius: 30rpx;
			border-bottom-left-radius: 30rpx;
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
			&::after{
				border: none;
			}
		}
		.btn2 {
			flex: 1;
			height: 60rpx;
			line-height: 60rpx;
			background: $theme-color;
			color: #fff;
			font-size: 22rpx;
			border-top-right-radius: 30rpx;
			border-bottom-right-radius: 30rpx;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			&::after{
				border: none;
			}
		}
		.btn3 {
			flex: 1;
			height: 70rpx;
			line-height: 70rpx;
			background: $theme-color;
			color: #fff;
			font-size: 28rpx;
			border-radius: 50rpx;
			&::after{
				border: none;
			}
		}
	}
	.info-container{
		width: 100%;
		box-sizing: border-box;
	}
	.u_popup_flex {
		width: 100%;
		display: flex;
		padding: 20rpx 30rpx 0 30rpx;
		box-sizing: border-box;
		image {
			width: 172rpx;
			height: 158rpx;
			border-radius: 10rpx;
		}
	}

	.u_popup_flex_c {
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-top: 20rpx;
	}

	.u_popup_flex_text1 {
		font-size: 30rpx;
		color: $theme-color;
	}

	.u_popup_flex_text2 {
		font-size: 22rpx;
		color: #BCBCBC;
	}

	.u_popup_flex_text3 {
		font-size: 22rpx;
	}

	.u_popup_2 {
		padding: 0 30rpx;
		margin-top: 30rpx;
		.u_popup_c{
			border-bottom: 1px solid #F6F7FB;
			padding-bottom: 30rpx;
			.u_popup_c_item{
				&:not(:last-child){
					margin-bottom: 10rpx;
				}
				.u_popup_c_item_tit{
					margin-bottom: 10rpx;
				}
				.u_popup_c_item_con{
					display: flex;
					flex-wrap: wrap;
					text {
						padding: 6rpx 20rpx;
						color: #525252;
						border: 1px solid #bcbcbc;
						border-radius: 30rpx;
						font-size: 20rpx;
						margin-right: 10rpx;
						min-width:50rpx ;
						text-align: center;
					}
					.act{
						background: #fbeff3;
						border-color: $theme-color;
						color: $theme-color;
					}
				}
			}
		}
	}

	.u_popup_3 {
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
	}
	.btn-container{
		padding: 10rpx 30rpx 0 30rpx;
		height: 100rpx;
		box-sizing: border-box;
		box-shadow: 0px -3px 8rpx 0 rgba($color: #999999, $alpha: 0.2);
		.btn3 {
			border-radius: 40rpx;
			color: #fff;
			background: $theme-color;
			font-weight: 300;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 26rpx;
		}
	}
	

	.show_guanggao {
		margin: 0 0 120rpx 0;
		.show_guanggao_list {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding:0 20rpx;
			.show_guanggao_text1{
				font-size: 28rpx;
				font-weight: bold;
			}
		}
		.show_guanggao_1{
			padding: 30rpx 20rpx 0 20rpx;
		}
	}

	.border-red {
		padding: 20rpx;
		border-bottom: 2px solid $theme-color;
	}

	.show_guanggao_img1 {
		width: 100%;
		height: 1095rpx;
	}
</style>
